/**
* Created by ren on 2016/12/29.
*/
<template>
  <div class='orderAddress page-wrap'>
    <Nav></Nav>
    <div class="container">
      <div class="address page">
        <div class="title">{{addressHandle}}</div>
        <div class="con">
          <div class="item">
            <label>所在地区<span>*</span></label>
            <div>
              <select class="select1" v-model="province">
                <option value="0">请选择省</option>
                <option v-bind:value="item.p" v-for="(item,index) in areaData">{{item.p}}</option>
              </select>
              <select class="select2" v-model="city">
                <option value="0">请选择市</option>
                <option :value="item.ct" v-for="(item,index) in subData">{{item.ct}}
                </option>
              </select>
              <select class="select3" v-model="area">
                <option value="0">请选择区</option>
                <option :value="item.dt" v-for="(item,index) in threeData">{{item.dt}}
              </select>
            </div>
          </div>
          <div class="item">
            <label>详细地址<span>*</span></label>
            <div>
              <textarea placeholder="建议您如实填写收获地址，例如街道名称，门牌号码，楼层和
房间号等信息" v-model="detailAddress"></textarea>
            </div>
          </div>
          <div class="item">
            <label>邮政编码<span>*</span></label>
            <div>
              <input type="text" v-model="code">
            </div>
          </div>
          <div class="item">
            <label>收货人<span>*</span></label>
            <div>
              <input type="text" v-model="consigneeName">
            </div>
          </div>
          <div class="item">
            <label>手机号<span>*</span></label>
            <div>
              <input type="text" v-model="mobile">
            </div>
          </div>
          <div class="item">
            <label></label>
            <div>
              <img :src="isDefault?require('../../assets/select1.png'):require('../../assets/select2.png')"
                   @click="setDefault" style="float: left;">
              <div
                style="font-size: 16px;margin-left: 20px;margin-top: 2px;display: inline-block;float: left;">设置为默认收货地址
              </div>
            </div>
          </div>
          <div class="item">
            <label></label>
            <div>
              <button class="btn" style="margin-right: 76px;background: #cfcccc;" @click="returnPrev">返回</button>
              <button class="btn" @click="saveAddress" :disabled="!btnStatus">保存</button>
            </div>
          </div>
        </div>
      </div>
      <Notify :parentThis='this'></Notify>
    </div>
  </div>
</template>

<script>
  import Nav from '../Nav'

  import API from '../../api'
  import Notify from '../../components/Notify'
  import areaData from '../../area'
  export default {
    name: 'orderAddress',
    components: {
      Nav,
      Notify
    },
    data: function () {
      return {
        notifyStatus: 2,
        consigneeName: '',
        mobile: '',
        province: '0',
        city: '0',
        area: '0',
        detailAddress: '',
        userId: '',
        code: '',
        isDefault: true,
        areaData: '',
        threeData: '',
        btnStatus: false,
        addressHandle: '新增收货地址'
      }
    },
    methods: {
      returnPrev: function () {
        this.$router.go(-1)
      },
      saveAddress: function () {
        this.$http.post(API.saveAddress, {
          'consigneeName': this.consigneeName,
          'mobile': this.mobile,
          'province': this.province,
          'city': this.city,
          'area': this.area,
          'detailAddress': this.detailAddress,
          'userId': this.$cookie.get('id'),
          'code': this.code,
          'isDefault': this.isDefault ? 1 : 0
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.notifyStatus = '1|' + result.message
            this.$router.go(-1)
          } else if (result.code === 0) {
            this.notifyStatus = '0|' + result.message
          }
        }, (err) => {
          console.log(err)
        })
      },
      setDefault: function () {
        this.isDefault = !this.isDefault
      }
    },
    computed: {
      subData: {
        get: function () {
          var that = this
          if (that.province !== '0') {
            return this.areaData.filter(function (item) {
              return item.p === that.province
            })[0].c
          }
        }
      },
      threeData: {
        get: function () {
          var that = this
          if (that.city !== '0') {
            return this.subData.filter(function (item) {
              return item.ct === that.city
            })[0].d
          }
        }
      }
    },
    mounted: function () {
      this.areaData = areaData
    },
    watch: {
      province: function (newVal) {
        this.city = '0'
        this.subData = ''
        this.area = '0'
        this.threeData = ''
        if (this.province !== '0' && this.city !== '0' && this.area !== '0' && this.consigneeName && this.mobile && this.mobile.length > 10) {
          this.btnStatus = true
        }
      },
      city: function (newVal) {
        this.area = '0'
        this.threeData = ''
        if (this.province !== '0' && this.city !== '0' && this.area !== '0' && this.consigneeName && this.mobile && this.mobile.length > 10) {
          this.btnStatus = true
        }
      },
      area: function () {
        if (this.province !== '0' && this.city !== '0' && this.area !== '0' && this.consigneeName && this.mobile && this.mobile.length > 10) {
          this.btnStatus = true
        }
      },
      consigneeName: function () {
        if (this.province !== '0' && this.city !== '0' && this.area !== '0' && this.consigneeName && this.mobile && this.mobile.length > 10) {
          this.btnStatus = true
        }
      },
      mobile: function (newVal) {
        if (!/^[0-9]*[1-9][0-9]*$/.test(newVal)) {
          this.mobile = ''
        } else {
          if (this.province !== '0' && this.city !== '0' && this.area !== '0' && this.consigneeName && this.mobile && this.mobile.length > 10) {
            this.btnStatus = true
          }
        }
      }
    }
  }
</script>
